<template>
  <el-container>
    <el-main>
      <el-row :gutter="10">
        <el-col v-for="(ele,index) in widgets" :key="index" :xs="24" :sm="24*3/ele.c" :md="24*2/ele.c" :lg="24/ele.c" :xl="24/ele.c">
          <component v-bind:is="ele.component"></component>
        </el-col>
      </el-row>
    </el-main>
    <el-aside width="300px">Aside</el-aside>
  </el-container>
</template>
<script>
export default {
  data() {
    return {
      widgets: []
    };
  },
  created() {
    this.$http({
      url: this.$URL_ADDR.my.widget,
      method: "GET"
    }).then(resp => {
      this.widgets = resp.data.data;
    //   for (let index = 0; index < this.widgets.length; index++) {
    //     const element = this.widgets[index];
    //     console.debug("element.component", element.component);
    //     // element.component = () => import(element.component);
    //   }
    });
  },
  components: {
    banner: () => import("@/widget/banner/banner")
  }
};
</script>
